<template>
	<view class="boxBg flex_r_c_c" :class="colorType==='dark'?'tc_1':'tc_w'">
		<view class="clockLeft flex_c_fs_fe">
			<text class="f_100 fw_600">{{curTime}}</text>
			<text class="f_30 fw_500">{{curDate}}</text>
			<view class="flex_r_fs_c">
				<text class="f_30 fw_500 margin_r8">{{curLocation}}</text>
				<text class="iconfont icondingwei"></text>
			</view>
		</view>
		<view class="clockLine" :class="colorType==='dark'?'bg_1':'bg_w'"></view>
		<view class="clockRight flex_c_fe_fe">
			<text :class="['weaIcon', 'iconfont', weatherInfo.curWeatherIcon]"></text>
			<text class="f_48 fw_500">{{weatherInfo.curTemp}}℃</text>
			<text class="f_30 fw_500">{{weatherInfo.minTemp}} / {{weatherInfo.maxTemp}}</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapActions } from 'vuex'
	import amap from '../../js_sdk/js-amap/amap-wx.js'
	export default {
		name:"fr-digital-clock",
		props: {
			colorType: { // 组件颜色, dark为暗色系, light为浅色系
				type: String,
				default: 'dark'
			},
		},
		computed: {
			...mapState(['location'])
		},
		data() {
			return {
				curTime: '',
				curDate: '',
				curLocation: '暂无定位',
				curCity: '',
				weatherInfo: {
					curWeatherText: '',
					curWeatherIcon: '',
					curTemp: '0',
					maxTemp: '0',
					minTemp: '0',
				},
				locationInfo: {
					latitude: 0, // 纬度，浮点数，范围为-90~90，负数表示南纬
					longitude: 0, // 经度，浮点数，范围为-180~180，负数表示西经
					speed: 0, // 速度，浮点数，单位m/s
					accuracy: 0, // 位置的精确度
					altitude: 0, // 高度，单位 m
					verticalAccuracy: 0, // 垂直精度，单位 m（Android 无法获取，返回 0）
					horizontalAccuracy: 0, // 水平精度，单位 m
				},
				isMorning: true,
				refresh: true,
			};
		},
		mounted() {
			this.initMap()
			this.initTime()
			this.initDate()
			this.getWeather()
			this.getLocation()
		},
		methods: {
			initMap() {
				const _this = this
				let amapFun = new amap.AMapWX({ key: 'd5f5b74d17767edb3178006855994290' })
				amapFun.getRegeo({
				    success(res) {
				        //成功回调
						let data = {}
						data.latitude = res[0].latitude
						data.longitude = res[0].longitude
						data.province = res[0].regeocodeData.addressComponent.province
						data.city = res[0].regeocodeData.addressComponent.city
						data.district = res[0].regeocodeData.addressComponent.district
						data.detailAddress = res[0].regeocodeData.formatted_address
						_this.curLocation = res[0].regeocodeData.addressComponent.district
						_this.$store.dispatch('location/setLocation', data)
				    },
				    fail(err) {
				        //失败回调
				        console.log(err)
				    }
				})
			},
			initTime() {
				const _this = this
				const hour = new Date().getHours()
				hour >= 6 && hour <= 18 ? _this.isMorning = true : _this.isMorning = false
				_this.curTime = _this.formatTime(new Date())
				
				setInterval(function() {
					const hour = new Date().getHours()
					hour >= 6 && hour <= 18 ? _this.isMorning = true : _this.isMorning = false
					_this.curTime = _this.formatTime(new Date())
				}, 10 * 1000)
			},
			formatTime(e) {
				let hour = ('0' + (e.getHours())).slice(-2)
				let minute = ('0' + (e.getMinutes())).slice(-2)
				let time = hour + ':' + minute
				return time
			},
			initDate() {
				let handler = new Date()
				let month = handler.getMonth() + 1
				let day = handler.getDate()
				let week = this.formatWeek(handler.getDay())
				let str = month + '月' + day + '日' + week
				this.curDate = str
			},
			formatWeek(e) {
				const arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
				return arr[e]
			},
			async getWeather() {
				this.$api.get({
					url: 'https://tianqiapi.com/api?version=v6&appid=69884335&appsecret=Yb5HAAOO',
					// loadingTip: this.refresh ? '获取数据中...' : '',
					data: {city: this.curCity},
					success: res => {
						let str = this.isMorning? 'm_':'n_' // m_代表早上, n_代表晚上
						
						// iconn_yun
						/**
						 * wea --天气  wea_img --天气icon
					     * 多云       yun
					     * 阴         yin
					     * 晴         qing
					     * 小雨转晴    yu
					     * 雷         lei
					     * 沙尘暴     shachen
					     * 雾         wu
					     * 冰雹       bingbao
					     * 雪         xue
						 */
					   
						let weatherInfo = {}
						weatherInfo.curWeatherText = res.wea
						weatherInfo.curWeatherIcon = 'icon' + str + res.wea_img
						weatherInfo.curTemp = res.tem
						weatherInfo.maxTemp = res.tem1
						weatherInfo.minTemp = res.tem2
						this.weatherInfo = weatherInfo
						
						let localData = res
						localData.wea_img_icon = 'icon' + str + res.wea_img
						const data = {
							date: localData.date,
							data: localData,
						}
						uni.setStorageSync('moon|weather', data)
					},
					fail: err => {}
				})
			},
			getLocation() {
				const _this = this
				uni.getLocation({
					type: 'wgs84',
					// geocode: true, // 是否解析地址信息, 会返回address数据, 仅app端支持
					success(res) {
						_this.locationInfo = res
						delete _this.locationInfo.errMsg
						_this.$store.dispatch('location/setLocation', _this.locationInfo)
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
.boxBg {
	width: 100%;
	height: 210rpx;
	// border: 2rpx solid #FFF;
	// box-sizing: border-box;
	.clockLeft {}
	.clockLine {
		width: 2rpx;
		height: 206rpx;
		margin: 0 36rpx;
		opacity: .6;
	}
	.clockRight {
		position: relative;
		height: 100%;
		.weaIcon {
			font-size: 160rpx;
			position: absolute;
			top: -50rpx;
			right: -36rpx;
		}
	}
}
</style>
